// Ext.create('Panda.view.Viewport',{
//         requires: [
//         'Panda.view.NewStation',
//         'Panda.view.SongControls',
//         'Panda.view.StationsList',
//         'Panda.view.RecentlyPlayedScroller',
//         'Panda.view.SongInfo'
//     ],
//     alias: 'widget.Viewport',
//     layout: 'fit',
//     initComponent: function() {
//         this.items = {
//             xtype: 'panel',
//             dockedItems: [{
//                 dock: 'top',
//                 xtype: 'toolbar',
//                 height: 80,
//                 items: [{
//                     xtype: 'newstation',
//                     width: 150
//                 }, {
//                     xtype: 'songcontrols',
//                     height: 70,
//                     flex: 1
//                 }, {
//                     xtype: 'component',
//                     html: 'Panda<br>Internet Radio'
//                 }]
//             }],
//             layout: {
//                 type: 'hbox',
//                 align: 'stretch'
//             },
//             items: [{
//                 width: 250,
//                 xtype: 'panel',
//                 layout: {
//                     type: 'vbox',
//                     align: 'stretch'
//                 },
//                 items: [{
//                     xtype: 'stationslist',
//                     flex: 1
//                 }, {
//                     html: 'Ad',
//                     height: 250,
//                     xtype: 'panel'
//                 }]
//             }, {
//                 xtype: 'container',
//                 flex: 1,
//                 layout: {
//                     type: 'vbox',
//                     align: 'stretch'
//                 },
//                 items: [{
//                     xtype: 'recentlyplayedscroller',
//                     height: 250
//                 }, {
//                     xtype: 'songinfo',
//                     flex: 1
//                 }]
//             }]
//         }
//     }
// });
// Ext.create('Ext.container.Viewport', {
//     layout: 'border',
//     items: [{
//         region: 'north',
//         html: '<h1 class="x-panel-header">Page Title</h1>',
//         border: false,
//         margins: '0 0 5 0'
//     }, {
//         region: 'west',
//         collapsible: true,
//         title: 'Navigation',
//         width: 150
//         // could use a TreePanel or AccordionLayout for navigational items
//     }, {
//         region: 'south',
//         title: 'South Panel',
//         collapsible: true,
//         html: 'Information goes here',
//         split: true,
//         height: 100,
//         minHeight: 100
//     }, {
//         region: 'east',
//         title: 'East Panel',
//         collapsible: true,
//         split: true,
//         width: 150
//     }, {
//         region: 'center',
//         xtype: 'tabpanel', // TabPanel itself has no title
//         activeTab: 0,      // First tab active by default
//         items: {
//             title: 'Default Tab',
//             html: 'The first tab\'s content. Others may be added dynamically'
//         }
//     }]
// });
Ext.application({
    name: 'Panda',
    autoCreateViewport: true,
    
    models: ['Station', 'Song'],
    stores: ['Stations', 'RecentSongs', 'SearchResults'],
    views: ['Viewport'],
    controllers: ['Station', 'Song'],
    /**
     * @requires 
     */
    requires: ['Panda.view.Viewport'],
    launch: function() {
        // This is fired as soon as the page is ready
    }
});